// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import {BrLine} from '../settingComponent/BrLine';

/**
 * @Description:
 * @author TangYong
 * @date 2023/2/8
 */
export class CardFold extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: this.props.stats,
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
    }

    componentDidUpdate(oldProps) {

        // 比较前后props
        if (this.props != oldProps) {
            this.setState({stats:this.props.stats})


        }
        //this.changedAndMVal(true)
    }
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    //方法
    changeStats = () => {
        this.setState({stats: this.state.stats == false ? true : false});
    };

    //DOM
    render() {
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    this.changeStats();
                }}>
                    {/*<Text>{this.props.stats.toString()}</Text>*/}
                    <View style={style.Item}>
                        <Text numberOfLines={1} style={style.TopText}>{this.props.title}</Text>
                        <View style={style.right}>
                            {this.props.itemNum == 0 ? (<View/>) :
                                <View>
                                    {this.state.stats == true ?
                                        <Icon style={style.icon} name='down' size={20}></Icon> :
                                        <Icon style={style.icon} name='up' size={20}></Icon>}
                                </View>}

                        </View>
                    </View>
                </TouchableOpacity>
                {this.props.itemNum == 0 ? (<View/>) : <View>
                    {
                        this.state.stats == true ? (
                            <View>
                                {this.props.ItemList.map((item, index) => {
                                    return <View key={index}>
                                        <BrLine></BrLine>
                                        <TouchableOpacity onPress={()=>{
                                            //参数为日期和用户id
                                            this.goto('allUserStatistics',{
                                                date:item.expectSignDate.toString().substring(0,10),
                                                userId:this.props.userId
                                            })
                                        }}>
                                            <View style={style.Item}>
                                                <Text numberOfLines={1} style={style.Text}>{item.expectSignDate.toString().substring(0,10)}</Text>
                                                <View style={style.right}>
                                                    {/*<Text numberOfLines={1} style={style.statusText}>{this.props.value}</Text>*/}
                                                    <Icon style={style.icon} name='right' size={20}></Icon>
                                                </View>
                                            </View>
                                        </TouchableOpacity>

                                    </View>;
                                })}

                            </View>
                        ) : <View></View>
                    }
                </View>

                }


            </View>
        );
    }

}

CardFold.defaultProps = {itemNum: 0, ItemList: [],stats:false};
const style = StyleSheet.create({
    //样式
    Item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        // paddingLeft:3,
        // paddingRight:3,
        //backgroundColor: 'red',
        paddingTop: 16,
        paddingBottom: 16,
    },
    TopText: {
        fontWeight: '600',
        //maxWidth: 130,
        // fontsize:"bold",
        flexDirection: 'row',
        color: '#111',
        fontSize: 16,
        textAlign: 'center',
    },
    right: {
        flexDirection: 'row',
    },
    Text: {
        color: '#111',
        fontSize: 14,
        textAlign: 'center',
    },
    statusText: {
        color: '#798188',
        marginRight: 5,
        fontSize: 15,
        maxWidth: 133,
    },
    icon: {
        color: '#798188',
        fontSize: 16,
    },
});

